import React, {Component} from 'react'
import {Input,Select,Button,Modal} from 'antd'
import Form from './XinzengForm'

let styleThree ={
    marginLeft:'35%'
};
let styleFour ={
    marginLeft:'20px'
};

class select extends Component{
    constructor() {
        super();
        this.state={
            Option:[
                {
                    label:'出售中',
                    value:'1'
                 },
                {
                    label:'促销中',
                    value:'2'
                },
                {
                    label:'已售空',
                    value:'3'
                },
                {
                    label:'已下架',
                    value:'4'
                },
            ],
            visible:false,
            goodsId:'',
            goodsName:'',
            goodsState:'',
        }
    }
    inputText (e){
        this.setState({
            goodsId:e.target.value
        });
    }
    inputTextTwo (e){
        this.setState({
            goodsName:e.target.value
        });
    }
    handleChange (value) {
        this.setState({
            goodsState:value
        });
    };
    xinzeng (){
        this.setState({
            visible:true
        })
    };
    handleOk = e => {
        this.setState({
            visible: false,
        });
    };
    handleCancel = e => {
        this.setState({
            visible: false,
        });
    };
    render() {
        return(
            <div>
                <span style={{marginLeft:20}}>商品ID: </span><Input placeholder="请输入商品ID" allowClear style={{width:150,margin:0}} onChange={this.inputText.bind(this)}/>
                <span style={{marginLeft:10}}>商品名称: </span><Input placeholder="请输入商品名称" allowClear style={{width:150,margin:0}} onChange={this.inputTextTwo.bind(this)}/>
                <span style={{marginLeft:10}}>商品状态: </span><Select placeholder="请选择商品状态" options={this.state.Option} allowClear style={{width:120,marginLeft:10,marginTop:150}}  onChange={this.handleChange.bind(this)}/>
                <Button type="primary" style={styleThree} onClick={this.props.onData.bind(this,this.state)}>搜索</Button>
                <Button type="primary" style={styleFour} onClick={this.xinzeng.bind(this)}>新增</Button>
                <Modal footer={[]} title="新增订单" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel}>
                    <Form/>
                </Modal>
            </div>
        )
    }
}

export default select